<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备示例</title>
    <style type="text/css">
    * {
				padding: 0;
				margin: 0;
			}

			html,
			body {
				height: 100%;
			}

			body {
				display: flex;
				justify-content: center;
				align-items: center;
				/* 渐变色网站： https://webgradients.com/*/
				background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%);
				/* 渐变换图片 */
			}
    </style>
	<script type="text/javascript" src="js/xhr.js"></script>
	<script type="text/javascript">
		function init() {
			refresh();
		}
		function refresh() {
			//这里是请求协议，需要根据双方约定来
			var post_req =
			{
				"type": 2,
				"data": [{
					"key": document.getElementById(1003).value,
					"val": document.getElementById(1004).value
				}]
			};
			console.log('%s ', post_req)
			// printf("%s",post_req);
			XHR.post('cgi-bin/web.cgi', JSON.stringify(post_req),
				function (x, info) {
					for (var i = 0; i < info.data.length; i++) {

						if (info.data[i].key == 101) {
							document.getElementById('1001').value = info.data[i].val;
						}
						else if (info.data[i].key == 102) {
							document.getElementById('1002').value = info.data[i].val;
						}
						else if (info.data[i].key == 302) {
							document.getElementById('1006').value = info.data[i].val;
						}
						else if (info.data[i].key == 303) {
							document.getElementById('1007').value = info.data[i].val;
						}
						else if (info.data[i].key == 304) {
							document.getElementById('1008').value = info.data[i].val;
						}
						else if (info.data[i].key == 301) {
							document.getElementById('1005').value = info.data[i].val;
						}
					}
					//把界面中ID为"temp"的组件的值赋值成回复json的data数组的某个值
					// document.getElementById('temp').value = info.data[0].val;
				}
			);
		}
    </script>
</head>
<body onload="init()">
        <center>
            <h1>边缘网管系统</h1>
            </div>
            设备操作：<br>
            空调开关：103 <br>空调温度控制：104 <br>灯开关：105
            <br>
            0：关 1：开
            <br>
            设备<input type="text" name="name" id="1003"><br>
            操作<input type="text" name="caozuo" id="1004"><br>
            <input type="button" name="caozuo" value="点击这里进行设置哟" id="1009" onclick="refresh()">

        </center>
    
    </body>
    
    </html>